import React, { useState, useRef } from "react";
import { Stage, Layer, Image } from "react-konva";
import "gifler";
import useImage from "use-image";
import bg from "./img/bg.png";
import go from "./img/go.png";
import back from "./img/back.png";
import smallStoneLight from "./img/smallStoneLight.png";
import bigStoneLight from "./img/bigStoneLight.png";
import smallStoneDark from "./img/smallStoneDark.png";
import bigStoneDark from "./img/bigStoneDark.png";
import prizeLightBox from "./img/prizeLightBox.png";
import prizeDarkBox from "./img/prizeDarkBox.png";
import people from "./img/lighting2.gif";
import style from "./goMapGame.module.scss";
import { useEffect } from "react";

const StoneArr = [
  {
    x: 52,
    y: 1245,
    width: 196,
    height: 105,
    type: "bigStone",
  },
  {
    x: 259,
    y: 1273,
    width: 107,
    height: 62,
    type: "smallStone",
  },
  {
    x: 372,
    y: 1250,
    width: 97,
    height: 54,
    type: "smallStone",
  },
  {
    x: 481,
    y: 1221,
    width: 194,
    height: 113,
    type: "bigStone",
  },
  {
    x: 588,
    y: 1095,
    width: 107,
    height: 62,
    type: "smallStone",
  },
  {
    x: 497,
    y: 1051,
    width: 107,
    height: 62,
    type: "smallStone",
  },
  {
    x: 387,
    y: 1054,
    width: 107,
    height: 62,
    type: "smallStone",
  },

  {
    x: 198,
    y: 1033,
    width: 196,
    height: 105,
    type: "bigStone",
  },

  {
    x: 82,
    y: 974,
    width: 107,
    height: 62,
    type: "smallStone",
  },
  {
    x: 62,
    y: 899,
    width: 107,
    height: 62,
    type: "smallStone",
  },
  {
    x: 160,
    y: 859,
    width: 107,
    height: 62,
    type: "smallStone",
  },
  {
    x: 274,
    y: 896,
    width: 107,
    height: 62,
    type: "smallStone",
  },
  {
    x: 398,
    y: 874,
    width: 107,
    height: 62,
    type: "smallStone",
  },
  {
    x: 508,
    y: 808,
    width: 201,
    height: 113,
    type: "bigStone",
  },
  {
    x: 398,
    y: 774,
    width: 107,
    height: 62,
    type: "smallStone",
  },
  {
    x: 294,
    y: 756,
    width: 107,
    height: 61,
    type: "smallStone",
  },
  {
    x: 186,
    y: 761,
    width: 107,
    height: 61,
    type: "smallStone",
  },
  {
    x: 89,
    y: 731,
    width: 107,
    height: 61,
    type: "smallStone",
  },
  {
    x: 51,
    y: 668,
    width: 107,
    height: 61,
    type: "smallStone",
  },
  {
    x: 149,
    y: 636,
    width: 107,
    height: 61,
    type: "smallStone",
  },
  {
    x: 269,
    y: 575,
    width: 201,
    height: 113,
    type: "bigStone",
  },
];

const prizeBoxArr = [
  {
    x: 470,
    y: 1131,
    width: 220,
    height: 186,
    type: "prizeBox",
  },
  {
    x: 187,
    y: 943,
    width: 220,
    height: 186,
    type: "prizeBox",
  },
  {
    x: 497,
    y: 718,
    width: 220,
    height: 186,
    type: "prizeBox",
  },
  {
    x: 255,
    y: 475,
    width: 220,
    height: 203,
    type: "prizeBox",
  },
];

const peopleXY = StoneArr.map((item, index) => {
  const nowStone = item;
  const x = nowStone.x + nowStone.width / 2 - 210 / 2 - 10;
  const y = nowStone.y + nowStone.height / 2 - 220;
  return { x, y };
});

const GIF = React.forwardRef(({ image, ...restsProp }, ref) => {
  const canvas = React.useMemo(() => {
    const node = document.createElement("canvas");
    return node;
  }, []);

  React.useEffect(() => {
    let anim;
    window.gifler(image).get((a) => {
      anim = a;
      anim.animateInCanvas(canvas);
      anim.onDrawFrame = (ctx, frame) => {
        ctx.drawImage(frame.buffer, frame.x, frame.y);
        ref.current && ref.current.getLayer().draw();
      };
    });
    return () => anim && anim.stop();
  }, [canvas, image, ref]);

  return <Image {...restsProp} image={canvas} ref={ref} />;
});

let prepareRuningFuncs = [];
let movingIds = [];
const GoMapGame = () => {
  const [bgImage] = useImage(bg);
  const [goImage] = useImage(go);
  const [backImage] = useImage(back);
  const [smallStoneLightImage] = useImage(smallStoneLight);
  const [bigStoneLightImage] = useImage(bigStoneLight);
  const [smallStoneDarkImage] = useImage(smallStoneDark);
  const [bigStoneDarkImage] = useImage(bigStoneDark);
  const [prizeLightBoxImage] = useImage(prizeLightBox);
  const [prizeDarkBoxImage] = useImage(prizeDarkBox);
  const [peopleImage] = useImage(people);
  const [nowPositonIndex, setnowPositonIndex] = useState(0);
  const peopleRef = useRef();

  const goNum = (nowPositonIndex, num) => {
    if (!num || nowPositonIndex >= 20)
      return prepareRuningFuncs.length && prepareRuningFuncs.shift()();
    const prepareRuningFunc = () => {
      [4, 9, 13, 18].includes(nowPositonIndex) &&
        peopleRef.current &&
        peopleRef.current.to({
          duration: 0,
          scaleX: [4, 13].includes(nowPositonIndex) ? -1 : 1,
          offsetX: [4, 13].includes(nowPositonIndex) ? 210 / 2 : 0,
        });

      peopleRef.current &&
        peopleRef.current.to({
          duration: 1,
          x: peopleXY[nowPositonIndex + 1].x / 2,
          y: peopleXY[nowPositonIndex + 1].y / 2,
        });

      const movingId = setTimeout(() => {
        setnowPositonIndex(nowPositonIndex + 1);
        console.log(
          "🚀 ~ file: index.js:269 ~ movingId ~ prepareRuningFuncs.length",
          prepareRuningFuncs.length
        );

        console.log("🚀 nowPositonIndex", nowPositonIndex);
        if (prepareRuningFuncs.length) prepareRuningFuncs.shift()();
      }, 1000);
      movingIds.push(movingId);
    };

    prepareRuningFuncs.push(prepareRuningFunc);
    goNum(nowPositonIndex + 1, --num);
  };
  const goRandom = () => {
    goNum(nowPositonIndex, 20);
  };

  useEffect(() => {
    return () => {
      movingIds.forEach((item) => clearTimeout(item));
      prepareRuningFuncs = [];
      movingIds = [];
    };
  }, []);
  return (
    <React.Fragment>
      <div className={style.goMapGame}>
        <Stage width={375} height={811.1}>
          <Layer>
            <Image x={0} y={0} image={bgImage} width={375} height={811.1} />
            <Image
              x={35 / 2}
              y={1366 / 2}
              image={goImage}
              width={367 / 2}
              height={121 / 2}
              onClick={goRandom}
            />
            <Image
              x={434 / 2}
              y={1360 / 2}
              image={backImage}
              width={285 / 2}
              height={116 / 2}
            />
            {StoneArr.map((item, index) => (
              <Image
                key={index}
                x={item.x / 2}
                y={item.y / 2}
                image={
                  item.type === "bigStone"
                    ? index > nowPositonIndex
                      ? bigStoneDarkImage
                      : bigStoneLightImage
                    : index > nowPositonIndex
                    ? smallStoneDarkImage
                    : smallStoneLightImage
                }
                width={item.width / 2}
                height={item.height / 2}
              />
            ))}
            {prizeBoxArr.map((item, index) => {
              const indexMap = {
                0: 3,
                1: 7,
                2: 13,
                3: 20,
              };
              return (
                <Image
                  key={index}
                  x={item.x / 2}
                  y={item.y / 2}
                  image={
                    indexMap[index] > nowPositonIndex
                      ? prizeDarkBoxImage
                      : prizeLightBoxImage
                  }
                  width={item.width / 2}
                  height={item.height / 2}
                />
              );
            })}
            <GIF
              ref={peopleRef}
              x={peopleXY[nowPositonIndex].x / 2}
              y={peopleXY[nowPositonIndex].y / 2}
              image={
                // [4, 5, 6, 7, 8, 13, 14, 15, 16, 17].includes(nowPositonIndex)
                //   ? require("./img/peopleGoLeft.gif").default
                //   :
                require("./img/peopleGo.gif").default
              }
              width={210 / 2}
              height={244 / 2}
            />
          </Layer>
        </Stage>
      </div>
    </React.Fragment>
  );
};

export default GoMapGame;
